// 装饰者模式

// 原有代码：
// 输入框元素
var telInput = document.getElementById('tel_input');
// 输入格式提示文案
var telWarnText = document.getElementById('tel_warn_text');
// 点击输入框显示输入框输入格式提示文字
input.onclick = function() {
  telWarnText.style.display = 'inline-block';
}


// 添加功能 v1 修改原有防范
// 输入框元素
var telInput = document.getElementById('tel_input');
// 输入格式提示文案
var telWarnText = document.getElementById('tel_warn_text');
// 输入框提示输入文案
var texDemoText = document.getElementById('tel_demo_text');
// 点击输入框显示输入框输入格式提示文字并隐藏输入提示文案
input.onclick = function() {
  telWarnText.style.display = 'inline-block';
  textDemoText.style.display = 'none';
}


// 添加功能 v2
// 装饰者
var decorator = function(input, fn) {
  // 获取事件源
  var input = document.getElementById(input);
  // 若事件源已绑定事件
  if (typeof input.onclick === 'function') {
    // 缓存事件源原有回调函数
    var oldClickFn = input.click;
    input.onclick = function() {
      // 事件源原有回调函数
      oldClickFn();
      // 执行新增的回调函数
      fn();
    }
  } else {
    // 事件源未绑定事件，直接为事件源添加新增回调函数
    input.onclick = fn;
  }
}

// 通过装饰者添加功能
// 电话输入框功能装饰
decorator('tel_input', function() {
  document.getElementById('tel_demo_text').style.display = 'none';
});
// 姓名输入框功能装饰
decorator('name_input', function() {
  document.getElementById('name_demo_text').style.display = 'none';
});

